<template>
	<Modal :title="title" v-model="visible" width="920" :footer-hide="true" @on-cancel="visible = false">
		<Card>			
			<div>抽奖商品组名称：{{form.drawProductGroupName === null ? '--' : form.drawProductGroupName}}</div>
			<Divider />
			<div>抽奖分类名称：{{form.drawCategoryName === null ? '--' : form.drawCategoryName}}</div>
			<Divider />
			<div>最低起扭：{{form.drawMoneyLimit === null ? '--' : form.drawMoneyLimit}}</div>
			<Divider />
			<div>
				<div>抽奖组商品信息：</div>
				<div style="display: flex;flex-wrap: wrap;align-items: center;">
					<div v-for="(item, index) in form.drawProductVos" :key="index" style="display: flex;flex-direction: column;align-items: center;margin: 5px 10px;">
						<img :src="item.drawProductPic === null ? '' : item.drawProductPic" alt="" style="width: 100px;height: 100px;margin-right: 10px;">
						<p>{{item.drawProductName}}</p>
					</div>
				</div>
			</div>
			<Divider />
			<div>备注：{{form.remark}}</div>
		</Card>
	</Modal>
</template>

<script>
import { getDrawProductDetailById } from '@/api/new';
export default {
	name: 'post',
	props: {
		value: {
			type: Boolean,
			default: false
		},
		data: {
			type: Object
		}
	},
	data() {
		return {
			visible: this.value,
			title: '',
			submitLoading: false,
			maxHeight: 510,
			form: {}
		};
	},
	methods: {
		setCurrentValue(value) {
			console.log(this.data)
			if (value === this.visible) {
				return;
			}
			this.title = '详情';
			// 回显
			getDrawProductDetailById({id: this.data.drawProductGroupId}).then(res => {
				if (res.code === 200) {
					this.form = res.data;
					this.form.drawProductVos = res.data.drawProductVos.filter(n => n);
				} else {
					this.form = {}
				}
			})
			this.visible = value;
		}
	},
	watch: {
		value(val) {
			this.setCurrentValue(val);
		},
		visible(value) {
			this.$emit('input', value);
		}
	},
	mounted() {
		// this.init();
	}
};
</script>

<style lang="less">
@import '../../../styles/drawer-common.less';
</style>
